<script setup lang="ts">
import { onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'
import { init as initEChart, type ECharts, type SeriesOption, type EChartsOption } from 'echarts'
import {
  SpeedTypeSelect,
  SpeedUnitSelect,
  SpeedInput,
  LengthUnitSelect,
  SpeedType,
  SpeedUnit,
  LengthUnit,
  fromMeterConverter,
  fromMpsConvert,
  speedUnitName,
  lengthUnitName,
  mps2Kt
} from '@/widgets'
import BADAAircraftTypeSelect from './BADAAircraftTypeSelect.vue'
import { calcThrustAltProfileById, type ThrustAltProfile, type ThrustItem } from './thrust-alt'

const acType = ref('A320')
const altUnit = ref(LengthUnit.FT)
const cas = ref(128.611111111111)

let profile: ThrustAltProfile
function updateData() {
  profile = calcThrustAltProfileById(acType.value, mps2Kt(cas.value))
}

const chartEl = ref<HTMLDivElement>()
let chart: ECharts

function updateChart(): void {
  if (!chart) {
    return
  }
  chart.clear()
  const opts: EChartsOption = {
    legend: {},
    tooltip: {
      axisPointer: { type: 'cross' }
    },
    title: {
      text: `${acType.value} 高度-推力`,
      subtext: makeSubtitle()
    },
    backgroundColor: '#fff',
    xAxis: {
      name: `高度(${lengthUnitName(altUnit.value)})`,
      type: 'value'
    },
    yAxis: {
      name: '推力(N)',
      type: 'value'
    },
    series: makeSeries()
  }
  chart.setOption(opts)
}

function makeSubtitle(): string {
  let ret = '大气模型:\nISA\n'
  ret += `质量:\n${profile.mass}[t]\n`
  ret += `CAS:\n${Math.round(mps2Kt(profile.CAS))}[kt]`
  return ret
}

function getXFn(): (e: ThrustItem) => number {
  const altFn = fromMeterConverter(altUnit.value)
  return (e) => Math.floor(altFn(e.alt))
}

function makeSeries(): SeriesOption[] {
  const { maxClimb, maxCruise, descent, drag } = profile
  const xFn = getXFn()
  const yFn = (e: ThrustItem) => Math.floor(e.value)
  return [
    {
      type: 'line',
      name: '最大爬升推力',
      showSymbol: false,
      data: maxClimb.map((e) => [xFn(e), yFn(e)])
    },
    {
      type: 'line',
      name: '最大巡航推力',
      showSymbol: false,
      data: maxCruise.map((e) => [xFn(e), yFn(e)])
    },
    {
      type: 'line',
      name: '下降推力',
      showSymbol: false,
      data: descent.map((e) => [xFn(e), yFn(e)])
    },
    {
      type: 'line',
      name: '阻力',
      showSymbol: false,
      data: drag.map((e) => [xFn(e), yFn(e)])
    }
  ]
}

onMounted(() => {
  chart = initEChart(chartEl.value)
  updateData()
  updateChart()
})

onUnmounted(() => {
  chart?.dispose()
})
function calc() {
  updateData()
  updateChart()
}
watch(altUnit, updateChart)
</script>
<template>
  <div class="bada-thrust-alt pane-block">
    <div class="row">
      <div class="txt-box col-3em">机型</div>
      <BADAAircraftTypeSelect v-model="acType" />
      <div class="txt-box col-3em" style="margin-left: 2em">速度</div>
      <SpeedInput v-model="cas" class="col-10em" :default-unit="SpeedUnit.KT" />
      <button class="button is-primary" style="margin-left: 2em" @click="calc">计算</button>
      <div style="margin-left: 1.5em; width: 1.5em" class="border-left" />
      <div class="txt-box" style="margin-right: 1em">高度单位</div>
      <LengthUnitSelect v-model="altUnit" :options="[LengthUnit.FT, LengthUnit.M]" />
    </div>
    <hr class="border-bottom" style="margin: 0.5em 0" />
    <div class="ta-chart" ref="chartEl"></div>
  </div>
</template>
<style lang="scss">
.bada-thrust-alt {
  .ta-chart {
    width: 70em;
    height: 40em;
  }
}
</style>
